<template>
    <view>
        <view class="title">
            提问题
            <view class="fabu" :class="issue?'fabu2':''" @click="fabu">
               发布
            </view>
        </view>
        <view class="con">
            <view class="issue">
                <input type="text" placeholder="请输入困扰您的问题" v-model="title" @focus='focus(0)'>
            </view>
            <textarea name="" id="" cols="30" rows="10" placeholder="添加问题描述"  v-model="texts" @focus='focus(1)'></textarea>
        </view>
        <view class="" style="padding: 0 4vw;">
            <image :src="item" mode="aspectFill" v-for="(item,index) in imagez" :key="index" style="width: 100rpx;height: 100rpx;margin-right: 35rpx;margin-top:20rpx;"></image>
        </view>
        <view class="bottom">
            <scroll-view scroll-x="true" style="width: 100vw;">
                <view class="leib" style="display: inline-flex;">
                    <view v-for="(item,index) in titletop" :class="clas==index?'clas':''" @click="titletop1(index,item)" :key="index">
                        {{item.dictLabel}}
                    </view>
                </view>
            </scroll-view>
            <scroll-view scroll-x="true" style="width: 100vw;">
                <view class="leib" style="display: inline-flex;">
                    <view  v-for="(item,index) in askTypeList"  :class="clas2==index?'clas':''" @click="label1(index,item)"  :key="index">
                        {{item.title}}
                    </view>
                </view>
            </scroll-view>
            <view class="bott">
                <view class="left" v-if='false'>
                    <image class="tup" src="../../static/questions/tupian.png" mode="" @click="images"></image>
                    <image @click="emojj=!emojj" class="biaoq" :style="{backgroundColor:emojj?'#93c3ed ':''}"   src="../../static/questions/biaoq.png" mode=""></image>
                </view>
                <view class="right">
                    <view class="rig1"  :class="isRead?'rig1s':''">
                        <radio-group>
                                    <radio :checked="isRead" :value="isRead" color="#2B7BED"  style="transform:scale(0.7)"  @tap="radioChange"/>
                        </radio-group>
                         仅对专家可见
                    </view>
                    <view class="rig2" :class="isRead2?'rig2s':''">
                        <radio-group>
                                    <radio :checked="isRead2" :value="isRead2" color="#2B7BED"  style="transform:scale(0.7)"  @tap="radioChange2"/>
                        </radio-group>

                        匿名
                    </view>
                </view>

            </view>

            <swiper class="slider" :current="0" v-show="emojj">
                <swiper-item v-for="(item, key) in emojiData" :key="key" class="slider-emoji" :class="[key==emojiData.length-1?'lastbox':'']">
                    <view class="slider-emojibox"  v-for="(emoji, index) in item" :key="index">
                        <text @click="selemoji(emoji)" class="slider-emoji-icon">
                        {{ emoji }}
                        </text>
                    </view>
                </swiper-item>
            </swiper>
        </view>

    </view>
</template>

<script>
    import emoji from "@/js_sdk/m-emoji/m-emoji_2.0.0/emoji.js";
    import {addQuestion, dictApi} from "../../api/api";
    import {getAskTypeList} from "../../api";
    export default {
        data() {
            return {
                emojj:false,
                issue:false, //发布
                isRead:0, //是否只对专家可见
                isRead2:0, //是否匿名

                titletop:[
                    '色大萨达',
                    '啊实打实多'
                ],
                clas2:-1,
                clas:-1,
              askTypeList:[],

                titletops:'', //选中标签1
                labels:'',//选中标签2

                emojiData:[],
                title:'',
                texts:'',
              tagType: '',
              typeId: 0,
                focuss:true,
                fileList1: [],
                imagez:[]
            };
        },
        onLoad() {
          dictApi({dictType: 'question_tag_type'}).then(res => {
            this.titletop = res.rows
          })
          //查询咨询类别
          getAskTypeList().then(res => {
            this.askTypeList = res.data
          })
            console.log(emoji);
            var page = Math.ceil(emoji.length/21);
                for (let i = 0; i < page; i++) {
                this.emojiData[i] = [];
                for (let k = 0; k < 21; k++) {
                    emoji[i*21+k]?this.emojiData[i].push(
                    emoji[i*21+k]
                    ):''
                }
            }
            console.log(this.emojiData);
        },
        watch: {
            title: {
                handler(newPwd, oldPwd) {
                    if(this.title.length!=0&&this.texts.length!=0){
                        this.issue=true
                    }else{
                        this.issue=false
                    }
                }
            },
            texts:{
                handler(newPwd, oldPwd) {
                    if(this.title.length!=0&&this.texts.length!=0){
                        this.issue=true
                    }else{
                        this.issue=false
                    }
                }
            }

        },
        methods:{
            titletop1(index,item){
                console.log('asdasd');
                if(index==this.clas){
                    this.clas=-1
                    this.titletops=''
                  this.tagType = ''
                }else{
                    this.clas=index
                    this.titletops=item
                  this.tagType = item.dictValue
                }
            },
            label1(index,item){

                if(index==this.clas2){
                    this.clas2=-1
                    this.labels=''
                  this.typeId = 0
                }else{
                    this.clas2=index
                    this.labels=item
                  this.typeId = item.id
                }
            },
            images(){
                  let that = this
                 uni.chooseImage({
                 	count: 1, //默认9
                 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                 	sourceType: ['album'], //从相册选择
                 	success: function (res) {
                        if(that.imagez.length<6){
                            console.log(res);
                            that.imagez.push(res.tempFilePaths)
                            console.log("sssss",that.imagez);
                        }
                        else{
                          uni.showToast({
                          	title: '最多支持五张图片',
                          	duration: 2000,
                          });
                        }

                 	}
                 });
            },
            fabu(){
              if (!this.tagType) {
                uni.showToast({
                  icon: 'none',
                  title: '请选择问题标签类型'
                })
                return
              }
              if (!this.typeId) {
                uni.showToast({
                  icon: 'none',
                  title: '请选择问题类别'
                })
                return
              }
                if(this.issue){
                  let data = {
                    title: this.title,
                    msg: this.texts,
                    tagType: this.tagType,
                    typeId: this.typeId,
                    isAnonymous: this.isRead,
                    expertsVisible: this.isRead2
                  }
                  console.log('data', data)
                  addQuestion(data).then(res => {

                    uni.showToast({
                      title: '提交成功'
                    })
                    setTimeout(() => {
                      uni.navigateBack()
                    }, 1500)
                  }).catch(err => {
                    uni.showToast({
                      title: err,
                      icon: 'none'
                    })
                    setTimeout(() => {
                      uni.navigateBack()
                    }, 1500)
                  })
                }
                else{
                    uni.showToast({
                    	title: '请填写完整',
                    	duration: 2000,
                        icon:"none"
                    });
                }
            },
            focus(a){
                this.emojj=false
                if(a==1){
                   this.focuss=false
                   console.log(this.focuss);
                }
                else{
                    this.focuss=true
                    console.log(this.focuss);
                }

            },
            selemoji(m) {
                console.log(m);
                if(this.focuss){
                   this.title= this.title+m
                }else{
                     this.texts= this.texts+m
                }

            },
            radioChange(evt){
                  let self = this;
                  if (self.isRead) {
                    self.isRead = 0
                  } else {
                    self.isRead = 1
                  }
                  console.log('isRead',this.isRead);
                },
            radioChange2(evt){
                  let self = this;
                  if (self.isRead2) {
                    self.isRead2 = 0
                  } else {
                    self.isRead2 = 1
                  }
                  console.log('isRead2',this.isRead2);
                },
        }
    }
</script>
<style>
    page{
        background-color: #FFFFFF !important;
    }
</style>
<style lang="scss">
.title{
    padding: 20rpx 4vw;
    font-size: 34rpx;
    color: #333;
    text-align: center;
    font-weight: bold;
    position: relative;
    .fabu{
        font-weight:normal;
        position: absolute;
        right:20rpx;
        bottom: 20rpx;
        font-size: 30rpx;
        padding: 5rpx 20rpx;
        border-radius: 50rpx;
        background-color: #E8E8E8;
        color: #999999;

    }
    .fabu2{
        background-color: #2089FF;
        color: #fff;
    }
}
.con{
    width: 92vw;
    margin: 30rpx auto;
    .issue{
        input{
            padding: 20rpx 0;
            font-size: 40rpx;
        }
        margin-bottom: 60rpx;
    }
    .textarea{
        font-size: 30rpx;
    }
}
.bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    .leib{
        view{
            margin-bottom: 20rpx;
            margin-left: 20rpx;
            background-color: #F1F1F1;
            color: #2089FF;
            padding: 5rpx 20rpx;
            border-radius: 50rpx;
            font-size: 26rpx;
        }
        .clas{
            background-color:#2089FF;
            color: #F1F1F1;
        }
    }
    .bott{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background-color: #fff;
        width: 100vw;
        padding: 20rpx 4vw 40rpx;
        .left{
            display: flex;
            align-items: center;
            .tup{
                width: 46rpx;
                height: 46rpx;
                margin-right: 50rpx;
            }
            .biaoq{
                width: 46rpx;
                height: 46rpx;
                border-radius: 50rpx;
            }
        }
        .right{
            display: flex;
            align-items: center;
            .rig1{
                display: flex;
                align-items: center;
                padding: 5rpx 20rpx;
                border-radius: 50rpx;
                border: 1rpx solid #E9E9E9;
                color: #B0B0B0;
                font-size: 26rpx;
                margin-right: 20rpx;

            }
            .rig1s{
               color: #333333;
            }
            .rig2{
                display: flex;
                align-items: center;
                padding: 5rpx 20rpx;
                border-radius: 50rpx;
                border: 1rpx solid #E9E9E9;
                color: #B0B0B0;
                font-size: 26rpx;
            }
            .rig2s{
               color: #333333;
            }
        }
    }

}
.slider {
    width: 92vw;
    margin: 10rpx auto;
    height: 300rpx;
    .slider-emoji {
       display: flex;
        flex-wrap: wrap;
        .slider-emojibox{
            width: 15.3vw;
            text-align: center;
        }
    }
}

.lastbox{
    justify-content: flex-start;
}
</style>
